<!--/**
* 基础菜单 系统模块
*/-->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
   
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="7">
        <el-input placeholder="请输入部门名称/编号"  class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
       <el-col :span="2" :offset="13" class="icon">
        <el-button type="primary" @click="dialogVisible3=true" >导出</el-button>
      </el-col>
      <el-col :span="2"  class="icon">
        <el-button type="primary" @click="dialogVisible3=true" >新增</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="margin-top:20px">
        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }" >
          <el-table-column prop="code" label="序号" header-align="center" ></el-table-column>
          <el-table-column prop="levelType" label="编号"  header-align="center" ></el-table-column>
          <el-table-column prop="exp" label="部门名称" header-align="center" ></el-table-column>
          <el-table-column prop="specialOffer" label="状态" header-align="center" ></el-table-column>
          <el-table-column label="操作" header-align="center" >
            <template slot-scope="scope">
              <!--修改对话框-->
              <el-button type="text" @click="onUpdate(scope.row)">修改</el-button>
              <!--删除对话框-->
              <el-button type="text" @click="onDelete(scope.row)">禁用</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
   export default {
    data() {
      return {
        tableData: [{
          id: 1,
          code: "01",
          levelType: "等级名称",
          exp: "0",
          specialOffer: "支持",
          multiples: "1.0"
        }],
        upd:{
          f_id: 0,
          f_code: "",
          f_levelType: "",
          f_exp: "",
          f_specialOffer: "",
          f_multiples: ""
        },
        del:{
          d_id: 0,
          d_levelType: "",
          d_levelTypes: []
        },
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false
      }
    },
    methods: {
      //获取初始数据
      getData(){

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit1() {
        //关闭模态框
        this.dialogVisible1 = false;
        console.log('submit1!');
        //提交修改会员类型数据
      },
      onSubmit2() {
        //关闭模态框
        this.dialogVisible2 = false;
        console.log('submit2!');
        //提交删除会员类型数据

        //初始化表单数据

      },
      onSubmit3() {
        //关闭模态框
        this.dialogVisible3 = false;
        console.log('submit3!');
        //提交新增会员类型数据

        //初始化表单数据

      },
      onUpdate(row){
        this.dialogVisible1 = true;
        console.log(row);
        //给修改表单内容赋值
        this.upd.f_id = row.id;
        this.upd.f_code = row.code;
        this.upd.f_levelType = row.levelType;
        this.upd.f_specialOffer = row.specialOffer;
        this.upd.f_multiples = row.multiples;
        this.upd.f_exp = row.exp;
      },
      onDelete(row){
        this.dialogVisible2 = true;
        console.log(row);
        this.del.d_id = row.id;
        this.del.d_levelType = row.levelType;
      },
    }
  }
</script>

<style scoped>
  .icon{
    text-align: right;
  }
  .for{
    text-align: center;
  }


</style>
